<template>
	<view class="flex-colume-start goodsDetailPage">
		<uni-swiper-dot v-if="banners.length > 0" mode="dot" :current="current" :info="banners" field="content">
			<swiper @change="bannerChange" class="swiper-box" circular autoplay interval="4000">
				<swiper-item v-for="(item ,index) in banners" :key="index">
					<view class="swiper-item">
						<image class="banner-image" mode="aspectFill" lazy-load :src="item.image" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view v-if="goodsDetail" class="flex-colume-start" style="align-items: flex-start; width: 690rpx;">
			<view class="goodsTitle">{{goodsDetail.name}}</view>
			<view class="flex-row-start price-box" style="position: relative;">
				<view class="price1">
					<span style="font-size: 20rpx;">¥</span>
					{{goodsDetail.shop_price}}
					<span class="word2">{{goodsDetail.buy_count}}人已购买</span>

				</view>
				<image @click="collectBtnClick()" class="collectImg" mode="aspectFit"
					:src="is_collect?'/static/arrow/collect-sel.png':'/static/arrow/collect-nor.png'"></image>
			</view>
			<rich-text type="text" :nodes="getRichContent(goodsDetail.description)" class="descHtml"></rich-text>
			<view class="distance1"></view>
			<!-- <view class="descHtml" v-html="goodsDetail.description"></view> -->
		</view>
		<view class="flex-row-center page-btn-box">
			<view class="flex-row-center numBtnBox">
				<image @click.stop="delIconClick()" src="/static/arrow/del-icon.png"></image>
				<view>{{number}}</view>
				<image @click.stop="addIconClick()" src="/static/arrow/add-icon.png"></image>
			</view>
			<view class="flex-row-center" style="justify-content: flex-end;">
				<view @click="cartBtnClick()" class="flex-row-center cartBtn">
					<image style="width: 40rpx; height: 40rpx;" src="/static/goods/cart_chen.png"></image>
				</view>
				<view @click="buyBtnClick()" class="buyBtn">立即购买</view>
			</view>
		</view>
		<u-popup mode='bottom' :show="buyOpen" :overlay="true" :closeable="false" :round="15"
			:closeOnClickOverlay="true" @close="buyOpen = false">
			<view v-if="goodsDetail" class="flex-colume-start buyAlert" style="height: 70vh;">
				<view v-if="adrModel" class="adrBox0 flex-row-start" style="align-items: flex-start;">
					<image src="/static/arrow/dingwei-black.png"
						style="margin-right: 6rpx; width: 30rpx; height: 30rpx;"></image>
					<view style="font-size: 26rpx; font-weight: 450; max-width: 550rpx;" class="text-two-line">
						{{adrModel.consignee}} {{adrModel.address}}
					</view>
					<image mode="aspectFit" @click="toAddAdr(1)" class="img3" src="/static/arrow/arrow-right-gray.png">
					</image>
				</view>
				<view v-else class="adrBox1 flex-row-start">
					<view class="flex-row-start">
						<image src="/static/arrow/dingwei-black.png"
							style="margin-right: 6rpx; width: 30rpx; height: 30rpx;"></image>
						<view style="font-size: 26rpx; font-weight: 450;">先填写信息，再确认订单信息</view>
					</view>
					<view class="flex-row-start" @click="toAddAdr">
						<view style="color: #FC9374; font-size: 24rpx;">现在填写</view>
						<image style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"
							src="/static/arrow/arrow-right-gray.png"></image>
					</view>
				</view>
				<view class="flex-row-start goodsItem1">
					<image class="goodsImg" :src="goodsDetail.thumb_url"></image>
					<view class="flex-colume-start" style="height: 180rpx; align-items: flex-start;">
						<view class="price1">
							<span>实付¥</span>
							{{parseFloat(goodsDetail.shop_price * number).toFixed(2)}}
						</view>
						<view class="flex-row-center numBtnBox1" style="margin-top: 40rpx;">
							<view class="b1" @click.stop="delIconClick()">-</view>
							<view class="b2">{{number}}</view>
							<view class="b1" @click.stop="addIconClick()">+</view>
						</view>
					</view>

				</view>
				<view class="flex-row-start" style="width: 100%; align-items: flex-start; padding: 0rpx 30rpx;">
					<view style="line-height: 40rpx; width: 80rpx; text-align: left; font-size: 28rpx;">备注</view>
					<textarea
						style="font-size: 2s6rpx; padding: 10rpx 12rpx; border-radius: 10rpx; border: 1px solid rgb(230, 230, 230); width: 500rpx; height: 120rpx;"
						v-model="remark"></textarea>

				</view>
				<view class="buyBtn1" style="position: fixed; left: 0rpx; bottom: 0rpx;">
					<u-button @click="submitBugBtnClick()"
						:loading="loading1" :customStyle="btnStyle"><span style="font-size: 26rpx;
						font-weight: 450;">立即支付¥</span>{{parseFloat(goodsDetail.shop_price * number).toFixed(2)}}</u-button>
				</view>

			</view>


		</u-popup>
		<AdrList ref="AdrList"></AdrList>

	</view>
</template>

<script>
	import AdrList from '@/components/adrList/adrList.vue'
	import {
		goodsDetail,
		addOrder,
		adrList,
		addCollect,
		collectList,
		delCollect
	} from '@/api/api'
	export default {
		components: {
			AdrList
		},
		data() {
			return {
				current: 0,
				banners: [],
				number: 1,
				goodsDetail: undefined,
				buyOpen: false,
				adrModel: undefined,
				loading1: false,
				remark: '',
				is_collect: 0,
				btnStyle:{
					color: 'white',
					backgroundColor: 'rgb(250, 58, 8)',
					fontSize: '40rpx',
					fontWeight: '500'
				}
			}
		},
		onLoad(e) {
			this._id = e.goodsId
			this.requestGoodsInfo()
		
		},
		methods: {
			delIconClick() {
				if (this.number <= 1) {
					return
				}
				this.number--
			},
			addIconClick() {
				if (this.number >= 100) {
					return
				}
				this.number++;
			},
			buyBtnClick() {
				if (!this.adrModel) {
					this.requestAdrList()
				}

				this.buyOpen = true
			},
			toAddAdr(e) {
				if (e == 1) {
					uni.$once('adrSel', res => {
						console.log('ss', res)
						this.adrModel = {
							...res
						}
					})
					this.$refs.AdrList.init('adrSel')
					return
				}
				uni.$once('adrUpt', res => {
					this.requestAdrList()
				})
				uni.navigateTo({
					url: '/pages/mine/adrAdd'
				})

			},
			cartBtnClik() {


			},
			collectBtnClick() {
				uni.showLoading({
					mask: true
				})
				var params = {
					id: this.goodsDetail.id,
					type: 'goods'
				}

				if (this.is_collect == 1) {
					delCollect(params).then(res => {
						if (res.code == 200) {
							this.requestGoodsInfo()
						}
						this.showSimpleMessage(res.message)
						setTimeout(res1 => {
							uni.hideLoading()
						})

					})
					return
				}
				addCollect(params).then(res => {
					if (res.code == 200) {
						this.requestGoodsInfo()
					}
					this.showSimpleMessage(res.message)
					setTimeout(res1 => {
						uni.hideLoading()
					})

				})


			},
			requestGoodsInfo() {
				goodsDetail({
					id: this._id
				}).then(res => {
					if (res.code == 200) {
						var data = res.goods_info
						this.banners = data.images
						this.goodsDetail = data
						this.is_collect = res.is_collect
					}

				})
			},
			requestAdrList() {
				adrList({}).then(res => {
					if (res.code == 200) {
						var arr = res.data
						if (arr.length > 0) {
							var model = undefined
							arr.forEach(item => {
								if (item.is_default == '1') {
									model = item
								}
							})
							if (model) {
								this.adrModel = model
							} else {
								this.adrModel = arr[0]
							}

						}
					}
				})
			},
			submitBugBtnClick() {
				if (!this.adrModel) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}

				this.loading1 = true
				uni.showLoading({
					mask: true
				})
				var m1 = [{
					goods_id: this.goodsDetail.id,
					number: this.number
				}]
				var params = {
					address_id: this.adrModel.id,
					cart_data: JSON.stringify(m1),
					user_memo: this.remark
				}
				addOrder(params).then(res => {
					uni.hideLoading()
					this.loading1 = false
					if (res.code == 200) {
						uni.showModal({
							showCancel:false,
							content: res.message
						})
						return

					}
					uni.showModal({
						content:res.message?res.message:res,
						showCancel:false
					})

				}).catch(err => {
					uni.hideLoading()
					this.loading1 = false
				})
			},
			bannerChange(e) {
				this.current = e.detail.current;
			}

		}
	}
</script>


<style lang="scss" scoped>
	.goodsDetailPage {
		align-items: center;

		.collectImg {
			position: absolute;
			right: 10rpx;
			top: 0rpx;
			width: 70rpx;
			height: 70rpx;
			box-sizing: border-box;
			padding: 15rpx;

		}

		.page-btn-box {
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100vw;
			background-color: white;
			border-top: 1px solid rgb(238, 238, 238);
			padding: 0rpx 0rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 0rpx);

			.buyBtn {
				width: 200rpx;
				text-align: center;
				background-color: #C90000;
				color: white;
				font-size: 30rpx;
				line-height: 90rpx;
			}

			.cartBtn {
				height: 90rpx;
				width: 100rpx;
				border-left: 1px solid rgb(238, 238, 238);

			}

			.numBtnBox {
				margin-left: 30rpx;
				height: 50rpx;

				image {
					width: 46rpx;
					height: 46rpx;
				}

				view {
					min-width: 28rpx;
					text-align: center;
					margin-left: 2rpx;
					margin-right: 2rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 500;
					font-size: 26rpx;
					color: #0D2750;
				}

			}

		}

		.swiper-box {
			font-size: 0px;
			width: 750rpx;
			height: 750rpx;

			.swiper-item {
				width: 750rpx;
				height: 750rpx;
			}

			.banner-image {
				width: 750rpx;
				height: 750rpx;

			}
		}

		.goodsTitle {
			margin-top: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
		}

		.price-box {
			width: 100%;
			height: 80rpx;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
			margin-bottom: 18rpx;

			.price1 {
				font-family: HarmonyOS Sans SC;
				font-weight: 600;
				font-size: 50rpx;
				color: #C90000;

				.word2 {
					margin-left: 16rpx;
					font-size: 24rpx;
					font-weight: normal;
					color: rgb(153, 153, 153);
				}
			}

		}

		.buyAlert {
			padding: 15rpx 2rpx 0rpx 0rpx;
			box-sizing: border-box;

			.adrBox0 {
				position: relative;
				width: 100%;
				padding: 20rpx 30rpx;
				border-bottom: 1px solid rgb(238, 238, 238);

				view {
					line-height: 32rpx;
				}

				.img3 {
					position: absolute;
					top: 10rpx;
					right: 30rpx;
					height: calc(100% - 20rpx);
					padding: 10rpx 8rpx;
					width: 40rpx;
				}
			}

			.adrBox1 {
				padding: 20rpx 30rpx;
				width: 100%;
				justify-content: space-between;
				border-bottom: 1px solid rgb(238, 238, 238);

				view {
					line-height: 32rpx;
				}

			}

			.goodsItem1 {
				width: 100%;
				padding: 20rpx 30rpx;

				.goodsImg {
					width: 200rpx;
					height: 200rpx;
					flex-shrink: 0;
					margin-right: 25rpx;
				}

				.price1 {
					font-size: 40rpx;
					font-weight: 500;
					color: rgb(250, 58, 8);

					// color: rgb(222, 92, 50);
					span {
						font-size: 20rpx;
					}
				}

				.numBtnBox1 {
					.b1 {
						width: 40rpx;
						color: rgb(153, 153, 153);


					}

					.b2 {
						width: 60rpx;
						line-height: 30rpx;
						border-left: 1px solid rgb(230, 230, 230);
						border-right: 1px solid rgb(230, 230, 230);
					}

					font-size: 26rpx;
					text-align: center;
					background-color: rgb(238, 238, 238);
					height: 50rpx;
					border-radius: 2rpx;
				}
			}

			.buyBtn1 {
				width: 100%;
				padding: 30rpx;
				// background-color: rgb(250, 58, 8);
				padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
				
			

				.b1 {
					color: white;
					background-color: rgb(250, 58, 8);
					font-size: 40rpx;
					font-weight: 500;

					span {
						font-size: 26rpx;
						font-weight: 450;

					}
				}

			}
		}

	}
</style>